<template>
  <div class="list">
    <el-table v-loading="loading" border :data="tableData">
      <el-table-column
        prop="name"
        label="业主姓名"
      />
      <el-table-column
        prop="phone"
        label="手机号"
      />
      <el-table-column
        prop="nickName"
        label="用户昵称"
      />
      <el-table-column
        align="center"
        prop="avatar"
        label="用户头像"
      >
        <template slot-scope="scope">
          <el-image :src="scope.row.avatar" fit="cover" class="img" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="gender"
        label="性别"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.gender === '1'">男</span>
          <span v-else-if="scope.row.gender === '0'">女</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next, total,sizes,jumper"
        :current-page="pageNo"
        :total="total"
        :disabled="loading"
        @current-change="searchByPage"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>

<script>
import { userList } from '@/api'
export default {
  name: 'UserList',
  data() {
    return {
      loading: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    searchByPage(pageNo) {
      this.pageNo = pageNo
      this.getList()
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.searchByPage(1)
    },
    async getList() {
      if (this.loading) return
      this.loading = true
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      await userList(params).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.total = res.data.pagination.total
          return
        }
        this.tableData = []
        this.total = 0
      })
      this.loading = false
    }
  }
}
</script>
